<template>
  <div class="company-info">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="账号昵称">
        <el-input v-model="form.userNick" />
        <el-button
          type="primary"
          class="save-account"
          :disabled="disabledSave"
          @click="saveNick"
        >保存</el-button>
      </el-form-item>
      <el-form-item label="公司信息：">
        <div class="company-container">
          <div class="company">{{ form.companyName }}</div>
          <div class="edit" @click="editCompany">修改</div>
        </div>
      </el-form-item>
      <el-form-item label="手机号码：">
        <div class="phone-container">
          <div class="phone">{{ form.phone | userNickFormat }}</div>
          <div class="edit" @click="editPhone">修改</div>
        </div>
      </el-form-item>
      <el-form-item label="邮箱：">
        <div class="email-container">
          <div class="email">{{ form.email | userNickFormat }}</div>
        </div>
      </el-form-item>
      <el-form-item label="上次登录时间：">
        <span>{{ form.lastLoginTime }}</span>
      </el-form-item>
      <el-form-item label="注册时间：">
        <span>{{ form.createTime }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    disabledSave: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        userNick: this.$store.getters.name,
        companyName: this.$store.getters.info.companyName,
        phone: this.$store.getters.info.userPhone,
        email: this.$store.getters.info.userName,
        lastLoginTime: this.$store.getters.info.lastLoginTime,
        createTime: this.$store.getters.info.createTime
      }

    }
  },
  methods: {
    editPhone() {
      this.$emit('editPhone', this.form.phone)
    },
    saveNick() {
      this.$emit('saveNick', this.form.userNick)
    },
    editCompany() {
      this.$router.push('/audit')
    }
  }
}
</script>

<style scoped lang="scss">
.company-info {
  padding: 50px 0 0 108px;
  position: relative;
  .save-account {
    width: 82px;
    height: 30px;
    border-radius: 4px;
    background-color: #ff3b30ff;
    line-height: 9px;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 390px;
  }
  .company-container{
    display: flex;
    height: 35px;
  }
  .phone-container {
    display: flex;
    height: 35px;
  }
   .edit {
      margin: 0 18px 0 8px;
      color: #ff3b30;
    }
    .edit:hover {
      cursor: pointer;
    }
}
</style>
